<template>
  <div class="wait-pay-wrap">
    <van-nav-bar
      title="我的订单"
      left-text="返回"
      left-arrow
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="20"/>
      </template>
    </van-nav-bar>
    <div class="pay-header">
      <span>应付金额</span>
      <span class="amount">¥<span class="amount-num">{{ amount }}</span></span>
      <span class="time">请在<van-count-down :time="time"/>内完成支付</span>
    </div>

    <div class="pay-method">
      <span class="pay-title">支付方式</span>

      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell clickable @click="changeType('1')">
            <template #title>
              <div class="method-name">
                <svg t="1625801542303" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
                     p-id="2657" width="128" height="128">
                  <path
                    d="M390.38887 644.808348c-61.306435 37.019826-70.38887-20.791652-70.38887-20.791652l-76.8-194.137044c-29.562435-92.271304 25.555478-41.605565 25.555478-41.605565s47.326609 38.778435 83.233392 62.397217c35.884522 23.618783 76.8 6.92313 76.8 6.923131L930.949565 206.536348C838.299826 81.65287 685.256348 0 512 0 229.197913 0 0 217.288348 0 485.353739c0 154.201043 75.909565 291.417043 194.114783 380.349218l-21.325913 132.763826s-10.395826 38.733913 25.62226 20.769391c24.553739-12.243478 87.106783-56.186435 124.371479-82.877217a535.240348 535.240348 0 0 0 189.217391 34.348521c282.757565 0 512-217.266087 512-485.353739 0-77.623652-19.322435-150.950957-53.537391-216.064-160.01113 104.269913-532.123826 346.601739-580.073739 375.518609z"
                    fill="#41B035" p-id="2658"></path>
                </svg>
                <span>微信支付</span>
              </div>
            </template>
            <template #right-icon>
              <van-radio checked-color="#E65D6E" name="1"/>
            </template>
          </van-cell>
          <van-cell clickable @click="changeType('2')">
            <template #title>
              <div class="method-name">
                <svg t="1625811205855" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
                     p-id="4774" width="128" height="128">
                  <path
                    d="M1029.85673387 703.17741155L1029.85673387 193.31574685c0-109.9011207-89.22993398-199.13105469-199.21390555-199.13105468L193.27432082-5.81530905c-109.9011207 0-199.13105469 89.18850915-199.13105469 199.13105469l0 637.40993232c0 109.9011207 89.14708313 199.13105469 199.1310547 199.13105469l637.40993232 0c97.97065599 0 179.45407337-70.83713422 196.06558887-163.96103892-52.81716148-22.86672403-281.69152831-121.70730974-400.95474939-178.62556847-90.76266689 109.94254674-185.79213275 175.89150364-329.04056013 175.89150364s-238.85784556-88.23572859-227.38305873-196.18986454c7.58081612-70.87855904 56.17260468-186.78633813 267.35839976-166.90223029 111.26815312 10.43915662 162.22117949 31.23461902 252.94242155 61.18505647 23.4881024-42.99938323 42.99938323-90.43126591 57.78818845-140.80433873L245.05585209 420.45025302l0-39.89249137 199.08962986 0 0-71.58278826L201.31081482 308.97497339l1e-8-43.91073777 242.87609194 0L444.18690677 161.66687478c0 0 2.19553731-16.15583763 20.04980836-16.15583764l99.58623974 1e-8 0 119.51177364 258.90765392 0 0 43.91073778-258.90765392 1e-8 0 71.58278825 211.22722111 0c-19.42842998 79.03932871-48.88176473 151.65774719-85.79163993 215.079767C750.60929422 617.80002346 1029.85673387 703.17741155 1029.85673387 703.17741155L1029.85673387 703.17741155 1029.85673387 703.17741155 1029.85673387 703.17741155zM280.88867103 794.76858334c-151.36777102 0-175.3115513-95.56799337-167.27505729-135.50190955 7.95364315-39.72679088 51.78153127-91.63259662 135.95758743-91.63259663 96.68647443 0 183.30661925 24.81370999 287.28393365 75.35248332C463.82246329 738.14030199 374.09542659 794.76858334 280.88867103 794.76858334L280.88867103 794.76858334 280.88867103 794.76858334zM280.88867103 794.76858334"
                    fill="#1296db" p-id="4775"></path>
                </svg>
                <span>支付宝支付</span>
              </div>
            </template>
            <template #right-icon>
              <van-radio checked-color="#E65D6E" name="2"/>
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
    <div class="submit-button" @click="createPay">
      <van-button type="primary" block round size="small"
                  color="linear-gradient(to right, #ff6034, #ee0a24)">
        确认付款¥({{ amount }})
      </van-button>
    </div>
  </div>
</template>

<script>
import {Toast} from 'vant'

export default {
  name: 'WaitPay',
  data () {
    return {
      radio: '',
      amount: 122,
      isWeChat: false,
      isAliPay: false,
      time: 60 * 60 * 24 * 1000
    }
  },
  methods: {
    changeType (type) {
      this.radio = type
    },
    back () {
      this.$router.back()
    },
    createPay () {
      if (this.radio === '') {
        Toast('请选择支付方式')
        return
      }
      if (this.radio === '1') {
        console.log('微信')
      } else {
        console.log('支付宝')
      }
    }
  }
}
</script>

<style scoped>
.submit-button {
  position: fixed;
  bottom: 0;
  left: 10px;
  right: 10px;

}

.pay-header {
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.amount {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #E65D6E;
}

.amount-num {
  font-size: 18px;
}

.van-count-down {
  display: inline-block;
}

.time {

  font-size: 12px;
}

.wait-pay-wrap {
  height: 100%;
}

.pay-title {
  display: inline-block;
  padding: 5px 5px;
}

.pay-method {
  background: white;
  padding: 5px;
}

.pay-method svg {
  height: 20px;
  width: 20px;
}

.method-name {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.van-cell {
  padding: 10px 5px;
}

.method-name span {
  margin-left: 5px;
}
</style>
